
$(document).ready(function(){
			
	startAnim();

	//start animation
	function startAnim(){
		
		var iWidth=500;
		var iHeight=90;
		var iTop=(window.innerHeight-iHeight)/2;
		var iLeft=(window.innerWidth-iWidth)/2;

		$('.title').css("top",iTop);
		$('.title-sub').css("top",iTop+70);
		
		$('.title').fadeIn(300).animate({ top:iTop-30 },300);
		$('.title-sub').delay(150).fadeIn(150).animate({ top:iTop+50 },150);
		$('.clearBtn').delay(5300).fadeIn(150);
		
		$('#btn_page_next').css("top", (window.innerHeight - 120)/2).delay(5300).fadeIn(150);
		$('#btn_page_prev').css("top", (window.innerHeight - 120)/2).delay(5300);
		$('#slide').delay(5300).fadeIn(150);
		
		$('.buttons').delay(5300).fadeIn(150, function(){
			initStroke();
			checkPreNextBtn(0);
			//getShadowData("../static/images/shadow.jpg");
		})
		
	}
	
	var isDraw = false;
	
	var p = Processing("whiteboard0");
	var canvas = document.getElementById("whiteboard0");
	var context = canvas.getContext("2d");
	
	var cavnasNumber = 10;
	canvasProps = [];
	for(var i = 0; i < cavnasNumber; i++){
		canvasProps.push({
			curStroke : -1,
			stroke : []
		})
		p = Processing("whiteboard" + i);
		p.background(255);
		p.size(cWidth, cHeight);
		p.smooth();
		p.noFill();
	}

	var totalWidth=3;
	var currentWidth, divWidth;
		
	var brushType = 1;//1:画笔 2:橡皮擦
	var currentCanvas = 0;//初始化第0个元素
	var isShadow = 0;
	var isSearch = 0;
	
	var cWidth = 480;
	var cHeight = 480;
	var cPaddingX = (window.innerWidth - cWidth)/2;
	var cPaddingY = (window.innerHeight - cHeight)/2;
	
	var searchedImgList = []; 
	var showSearchImgNum = 10; 
	function initStroke(){
		$('.wboard').attr("height", cHeight);
		$('.wboard').attr("width", cWidth);
		
		p = Processing("whiteboard0");
		
		brushType = 1;
		setBrushStyle(brushType);
		
		//p.strokeCap(ROUND);
		//p.strokeJoin(ROUND);
		context.lineCap = "round";
		context.lineJoin = "round";
		
		$('#btn_page_next').click(function(e){
			nextSlide();
			removeBGimg();
		});
		$('#btn_page_prev').click(function(e){
			preSlide();
			removeBGimg();
		});
		$('.brushBtn').click(function(e){
			if(!$(this).hasClass("sel")){
				$(this).addClass("sel");
				$('.eraseBtn').removeClass("sel");
				brushType = 1;
				setBrushStyle(brushType);
			}
		});
		$('.eraseBtn').click(function(e){
			if(!$(this).hasClass("sel")){
				$(this).addClass("sel");
				$('.brushBtn').removeClass("sel");
				brushType = 2;
				setBrushStyle(brushType);
			}
		});
		
		/* drawing sketch functions */
		function sketchDown(x,y){
			isDraw = true;
			
			var index = ++canvasProps[currentCanvas].curStroke;
			
			canvasProps[currentCanvas].stroke[index] = {
				type : brushType,
				segments : []
			}
			
			setBrushStyle(brushType);
			
			if(brushType==1){
				canvasProps[currentCanvas].stroke[index].segments.push({
					point : [x, y],
					handleIn : [],
					handleOut : []
				});
			}	
			else{
				canvasProps[currentCanvas].stroke[index].segments.push({
					point : [x, y]
				});
				context.clearRect(canvasProps[currentCanvas].stroke[index].segments[0].point[0]-currentWidth/2, 
									canvasProps[currentCanvas].stroke[index].segments[0].point[1]-currentWidth/2,
									currentWidth,currentWidth);
			}
			
			
		}
		function sketchMove(x,y){
			if(isDraw){
				
				var index = canvasProps[currentCanvas].curStroke;
				var len = canvasProps[currentCanvas].stroke[index].segments.length;
				
				if(brushType==1){
				canvasProps[currentCanvas].stroke[index].segments.push({
						point : [x, y],
						handleIn : [],
						handleOut : []
					});
				}	
				else{
					canvasProps[currentCanvas].stroke[index].segments.push({
						point : [x, y]
					});
					
				}
				if(brushType == 1){
					if(currentWidth<totalWidth){
						currentWidth+=divWidth;
					}
					
					p.beginShape();
					p.strokeWeight(currentWidth);
					p.curveVertex(canvasProps[currentCanvas].stroke[index].segments[len-1].point[0],
						canvasProps[currentCanvas].stroke[index].segments[len-1].point[1]);
					p.curveVertex(canvasProps[currentCanvas].stroke[index].segments[len-1].point[0],
						canvasProps[currentCanvas].stroke[index].segments[len-1].point[1]);
					p.curveVertex(canvasProps[currentCanvas].stroke[index].segments[len].point[0],
						canvasProps[currentCanvas].stroke[index].segments[len].point[1]);
					p.curveVertex(canvasProps[currentCanvas].stroke[index].segments[len].point[0],
						canvasProps[currentCanvas].stroke[index].segments[len].point[1]);
					p.endShape();
				}
				else{
					context.clearRect(canvasProps[currentCanvas].stroke[index].segments[len-1].point[0]-currentWidth/2, 
									canvasProps[currentCanvas].stroke[index].segments[len-1].point[1]-currentWidth/2,
									currentWidth,currentWidth);
				}
					
				
			}
		}
		function sketchUp(){
			p.endShape();
			endStroke();
			checkPreNext();
			smooth(canvasProps[currentCanvas].stroke[canvasProps[currentCanvas].curStroke]);
			redraw();
		}
		for(var i = 0; i < cavnasNumber; i++){
			//getElementById('whiteboard'+currentCanvas).
			document.getElementById('whiteboard'+i).addEventListener('touchstart',function(ev){
				//$('#txt').html(ev.touches[0].pageX);
				//log('touchstart',ev.touches[0].pageX+','+ev.touches[0].pageY+'/'+(ev.timeStamp-0));
				sketchDown(ev.touches[0].pageX-cPaddingX, ev.touches[0].pageY-cPaddingY);
				ev.preventDefault()
			},false);
			document.getElementById('whiteboard'+i).addEventListener('touchend',function(ev){
				//$('#txt').html(ev.changedTouches[0].pageX);
				//log('touchend',ev.changedTouches[0].pageX+','+ev.changedTouches[0].pageY+'/'+(ev.timeStamp-0));
				sketchUp();
				ev.preventDefault()
			},false);
			document.getElementById('whiteboard'+i).addEventListener('touchmove',function(ev){
				//$('#txt').html(ev.touches[0].pageX);
				sketchMove(ev.touches[0].pageX-cPaddingX, ev.touches[0].pageY-cPaddingY);
				ev.preventDefault()
				//log('touchmove',ev.touches[0].pageX+','+ev.touches[0].pageY+'/'+(ev.timeStamp-0));
			},false);
		}
		
		$('.wboard').mousedown(function(e){
			sketchDown(e.pageX-cPaddingX, e.pageY-cPaddingY);
		});
		$('.wboard').mousemove(function(e){
			sketchMove(e.pageX-cPaddingX, e.pageY-cPaddingY);
		});
		$('.wboard').mouseup(function(e){
			sketchUp();
		});
		$('.wboard').mouseleave(function(e){
			sketchUp();
		});
		
		$('.clearBtn').click(function(e){
			//isShadow = 0;
			context.clearRect(0,0,canvas.width,canvas.height);
			context.save();
			canvasProps[currentCanvas] = {
				curStroke : -1,
				stroke : []
			}
			$('#whiteboard'+currentCanvas).fadeTo(300, 1);
			checkPreNext();
		});
		$('.clearBtn').mouseenter(function(){
			$('#whiteboard'+currentCanvas).fadeTo(300, 0.3);
		});
		$('.clearBtn').mouseout(function(){
			$('#whiteboard'+currentCanvas).fadeTo(300, 1);
		});
		
		
		$('.saveBtn').click(function(e){
			var canvasData=canvas.toDataURL();
			window.open(canvasData, "_blank");
		});
		
		$('.shadowBtn').click(function(e){
			var canvasData=canvas.toDataURL();
			$('#loading').fadeIn(200);
			$.ajax({
				type: "POST",
				data: {drawData : canvasData},
				url: '/_update_shadow',
				success: function(data) {
					
					getShadowData(data);
					//var sImg = document.getElementById("shadowImg");
					//sImg.src = data;
				},
			});
		});
		$('.preBtn').click(function(e){
			if(!$(this).hasClass("dis")){
				canvasProps[currentCanvas].curStroke --;
				redraw();
				checkPreNext();
			}
		});
		$('.nextBtn').click(function(e){
			if(!$(this).hasClass("dis")){
				canvasProps[currentCanvas].curStroke ++;
				redraw();
				checkPreNext();
			}
		});
		$(document).keydown(function(e){ 
			var code = e.keyCode;
			if (code === 33 || code == 37 || code == 38/*pg up/ left/ up*/) {
				preSlide();
			}
			else if (code === 32 || code === 34 || code == 39 || code == 40/*space/ pg down/ right/ down*/) {
				nextSlide();
			}
		});
		
	}
	
	function nextSlide(){
		if( currentCanvas!=0){
			var i = currentCanvas - 1;
			$('#slide .slides canvas:eq(' + i + ')').removeClass("past");
		}
		$('#slide .slides canvas:eq(' + currentCanvas + ')').css("z-index",10);
		$('#slide .slides canvas:eq(' + currentCanvas + ')').removeClass("present");
		$('#slide .slides canvas:eq(' + currentCanvas + ')').addClass("past");
		currentCanvas ++;
		$('#slide .slides canvas:eq(' + currentCanvas + ')').css("z-index",100);
		$('#slide .slides canvas:eq(' + currentCanvas + ')').removeClass("future");
		$('#slide .slides canvas:eq(' + currentCanvas + ')').addClass("present");
		var i = currentCanvas + 1;
		$('#slide .slides canvas:eq(' + i + ')').addClass("future");
		
		checkPreNextBtn(currentCanvas);
		setCurrentCanvas(currentCanvas);
	}
	function preSlide(){
		if( currentCanvas!=cavnasNumber-1){
			var i = currentCanvas + 1;
			$('#slide .slides canvas:eq(' + i + ')').removeClass("future");
		}
		$('#slide .slides canvas:eq(' + currentCanvas + ')').css("z-index",10);
		$('#slide .slides canvas:eq(' + currentCanvas + ')').removeClass("present");
		$('#slide .slides canvas:eq(' + currentCanvas + ')').addClass("future");
		currentCanvas --;
		$('#slide .slides canvas:eq(' + currentCanvas + ')').css("z-index",100);
		$('#slide .slides canvas:eq(' + currentCanvas + ')').addClass("present");
		$('#slide .slides canvas:eq(' + currentCanvas + ')').removeClass("past");
		var i = currentCanvas - 1;
		$('#slide .slides canvas:eq(' + i + ')').addClass("past");
		checkPreNextBtn(currentCanvas);
		setCurrentCanvas(currentCanvas);
	}
	function setCurrentCanvas(a){
		p = Processing("whiteboard"+a);
		canvas = document.getElementById("whiteboard"+a);
		context = canvas.getContext("2d");
	}		
	function checkPreNextBtn(a){
		if(a == cavnasNumber -1 ){
			$('#btn_page_next').hide();
			$('#btn_page_prev').show();
		}
		else if(a == 0){
			$('#btn_page_prev').hide();
			$('#btn_page_next').show();
		}
		else{
			$('#btn_page_prev').show();
			$('#btn_page_next').show();
		}
	}
	
	function endStroke(){
		isDraw = false;
		p.endShape();
		
		checkPreNext();
	}
	
	function checkPreNext(){
		
		if(canvasProps[currentCanvas].curStroke == -1){
			if(!$(".preBtn").hasClass("dis"))
				$(".preBtn").addClass("dis");
		}else{
			$(".preBtn").removeClass("dis");
		}
		
		if( (canvasProps[currentCanvas].curStroke == -1 && canvasProps[currentCanvas].stroke.length == 0) || canvasProps[currentCanvas].curStroke ==canvasProps[currentCanvas].stroke.length-1){
			if(!$(".nextBtn").hasClass("dis"))
				$(".nextBtn").addClass("dis");
		}else{
			$(".nextBtn").removeClass("dis");
		}
	}
	
	function redraw(){
		context.clearRect(0,0,canvas.width,canvas.height);
		for(var i=0; i < canvasProps[currentCanvas].curStroke+1; i++){
			var type = canvasProps[currentCanvas].stroke[i].type;
			setBrushStyle(type);
			if(type==1){
				var countWidth = 0;
				var len = canvasProps[currentCanvas].stroke[i].segments.length;
				//draw the first point
				p.strokeWeight(currentWidth);
				p.beginShape();
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[0].point[0], canvasProps[currentCanvas].stroke[i].segments[0].point[1]);
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[0].point[0], canvasProps[currentCanvas].stroke[i].segments[0].point[1]);
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[1].point[0], canvasProps[currentCanvas].stroke[i].segments[1].point[1]);
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[1].point[0], canvasProps[currentCanvas].stroke[i].segments[1].point[1]);
				p.endShape();
				
				//draw point 2-(len-1)
				for(var j= 2; j < len-1; j++){
					
					if(currentWidth<totalWidth){
						currentWidth+=divWidth;
						p.beginShape();
						p.strokeWeight(currentWidth);
					}
					else if(countWidth == 0 && currentWidth == totalWidth){
						p.beginShape();
						p.strokeWeight(currentWidth);
						countWidth = 1;
					}
					
					p.bezier(
						canvasProps[currentCanvas].stroke[i].segments[j-1].point[0], 
						canvasProps[currentCanvas].stroke[i].segments[j-1].point[1],
						canvasProps[currentCanvas].stroke[i].segments[j-1].handleOut[0],
						canvasProps[currentCanvas].stroke[i].segments[j-1].handleOut[1],
						canvasProps[currentCanvas].stroke[i].segments[j].handleIn[0],
						canvasProps[currentCanvas].stroke[i].segments[j].handleIn[1],
						canvasProps[currentCanvas].stroke[i].segments[j].point[0], 
						canvasProps[currentCanvas].stroke[i].segments[j].point[1]
					);
					
					if(currentWidth<totalWidth || j == len-2){
						p.endShape();
						countWidth = 0;
					}
					
				}	
				
				//draw the last point
				p.strokeWeight(currentWidth);
				p.beginShape();
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[len-1].point[0], canvasProps[currentCanvas].stroke[i].segments[len-1].point[1]);
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[len-1].point[0], canvasProps[currentCanvas].stroke[i].segments[len-1].point[1]);
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[len-2].point[0], canvasProps[currentCanvas].stroke[i].segments[len-2].point[1]);
				p.curveVertex(canvasProps[currentCanvas].stroke[i].segments[len-2].point[0], canvasProps[currentCanvas].stroke[i].segments[len-2].point[1]);
				p.endShape();
			}
			else{
				for(var j=0; j < canvasProps[currentCanvas].stroke[i].segments.length; j++){
					context.clearRect(canvasProps[currentCanvas].stroke[i].segments[j].point[0]-currentWidth/2, 
									canvasProps[currentCanvas].stroke[i].segments[j].point[1]-currentWidth/2,
									currentWidth,currentWidth);
					
				}	
			}
		}
	}
	function setBrushStyle(brushType){
		if(brushType == 1){
			currentWidth = totalWidth/2;
			divWidth = totalWidth/10;
			p.stroke(87,92,116);
		}
		else if(brushType == 2){	
			currentWidth = totalWidth*5;
			
		}
	}
	
	function genImage(strData) {
        var img = document.createElement('img');
        img.src = strData;
		var $imgs = document.getElementById('imgs');
		$imgs.appendChild(img);
        return img;
    }
	
	$(window).resize(function() {
		cPaddingX = (window.innerWidth - cWidth)/2;
		cPaddingY = (window.innerHeight - cHeight)/2;
	});
	
	$('.addpicBtn').click(function(e){
		if($(this).hasClass("sel")){
			$(this).removeClass("sel");
			removeBGimg();
		}
	});
	
	//searchBtn
	$('.searchBtn').click(function(e){
		if($(this).hasClass("sel")){//取消选中
			$(this).removeClass("sel");
			$('.imgPreview').removeClass("showBox");
			$('.imgPreview').addClass("hideBox");
			isSearch = 0;
		}
		else{//选中
			$(this).addClass("sel");
			$('.imgPreview').removeClass("hideBox");
			$('.imgPreview').addClass("showBox");
			isSearch = 1;
			if(searchedImgList.length!=0)
				showSearchImg(searchedImgList);
		}
	});
	
	/* 改变画板和背景图的zindex */
	function switchZIndex(e,f){
		e.stopPropagation();
		e.preventDefault();
		f.css("z-index",10);
		$('#dropzone').css("z-index",100);
	}
	$('.wboard').bind('dragenter', function(e) {
		switchZIndex(e,$(this));
	}, false);
	$('.wboard').bind('dragover', function(e) {
		switchZIndex(e,$(this));
	}, false);
	
	/* #dropzone的dragenter和dragover css样式改变效果 */
	function dragStyle(e){
		e.stopPropagation();
		e.preventDefault();
		$('#dropzone').addClass('rounded');
		$('#dropzone').html('Drop in images from your desktop!');
		$('#dropzone').css("z-index",100);
	}
	function removeDragStyle(e){
		e.stopPropagation();
		e.preventDefault();
		$('#dropzone').removeClass('rounded');
		$('#dropzone').empty();
		$('#dropzone').css("z-index",0);
		$('.addpicBtn').addClass('sel');
	}
	$('#dropzone').bind('dragenter', function(e) {
		dragStyle(e);
	}, false);
	$('#dropzone').bind('dragover', function(e) {
		dragStyle(e);
	}, false);
	$('#dropzone').bind('dragleave', function(e) {
		removeBGimg();
		removeDragStyle(e);
	}, false);
	
	document.getElementById('dropzone').addEventListener('drop', function(e) {
		removeBGimg();
		removeDragStyle(e);
		
		var reader = new FileReader();
		reader.onload = function(evt) {
			var img =document.createElement('img')
			img.onload = function(){
			
				if(img.width>img.height)
					img.width = 480;
				else
					img.height = 480;
				bgImgFilter();
			}
			img.id="BGimg";
			img.src=evt.target.result;
			document.getElementById('dropImg').appendChild(img);
		};
		
		reader.readAsDataURL(e.dataTransfer.files[0]);
		//fadeImg();
	}, false);
	
	/* 背景参考图淡出效果 
	var fadeoutImgInter;
	var BGimgOpacity = 0.15;
	function fadeImg(){
		fadeoutImgInter = setInterval(function(){
										   startClock()
										}, 1000)
	}
	function startClock(){
		BGimgOpacity -= 0.01;
		if(BGimgOpacity>=0)
			$('#BGimg').css('opacity',BGimgOpacity);
		else{
			clearInterval(fadeoutImgInter);
		}
	}
*/
	function bgImgFilter(){
		$('#BGimg').pixastic("desaturate");
		$('#BGimg').pixastic("brightness", {brightness:50,contrast:0.5});
		$('#BGimg').css("opacity",1);
	}
	
	function removeBGimg(){
		$('#BGimg').fadeTo(200, 0).remove();
		$('.addpicBtn').removeClass('sel');
	}
	
	
	
	function smooth(a){

		var index = canvasProps[currentCanvas].curStroke,
			len = a.segments.length,
			middlePoints = [];
		
		for(var i = 0; i < len; i++){
			var point = a.segments[i].point,
				nextPoint = (i == len-1) ? a.segments[0].point : a.segments[i+1].point;
			
			middlePoints.push(
					middle(point, nextPoint));
		}
		for(var i = 0; i < len; i++){
			var point = a.segments[i].point,
				middlePoint = middlePoints[i],
				prevMiddlePoint = (i == 0) ? middlePoints[len-1] : middlePoints[i-1];
				
			var middleMiddlePoint = middle(middlePoint, prevMiddlePoint);
				v1 = sub(middlePoint, middleMiddlePoint),
				v2 = sub(prevMiddlePoint, middleMiddlePoint);

			var dv = computeVector(point, prevMiddlePoint, middlePoint);
			
			canvasProps[currentCanvas].stroke[index].segments[i].handleIn = add(add(middleMiddlePoint, scale(v2, 1)), dv);
			canvasProps[currentCanvas].stroke[index].segments[i].handleOut = add(add(middleMiddlePoint, scale(v1, 1)), dv);
		}
		
		canvasProps[currentCanvas].stroke[index].segments[0].handleOut = canvasProps[currentCanvas].stroke[index].segments[0].handleIn = null;
		canvasProps[currentCanvas].stroke[index].segments[len-1].handleIn = canvasProps[currentCanvas].stroke[index].segments[len-1].handleOut = null;
		
		function computeVector(a, b, c){
			var m = middle(b, c);
			return sub(a, m);
		}
		function initPoint(x,y){
			return [x, y];
		}
		function middle(a,b){
			return [(a[0]+b[0])/2, (a[1]+b[1])/2];
		}
		function add(a,b){
			return [(a[0]+b[0]), (a[1]+b[1])];
		}
		function sub(a,b){
			return [(a[0]-b[0]), (a[1]-b[1])];
		}
		function scale(a,n){
			return [a[0]*n, a[1]*n];
		}
		
		
	}

	//user interface functions
	//shadowImg filter
	var cursorRate = 0;//0：显示以cursor为中心的效果   1：不显示以cursor为中心的效果
	var shadowData;
	
	//返回阴影图像的pixel数据	
	function getShadowData(data){
		var tempCanvas = document.getElementById("shadowImg");
		var tempContext = tempCanvas.getContext("2d");
		var shadow = new Image();
		shadow.src = "../static/shadows/shadow"+data.result+".png"; 
		
		shadow.onload = function(){
		
			$('#loading').fadeOut(200);
			
			isShadow = 1;
			tempContext.clearRect(0,0,canvas.width,canvas.height);
			tempContext.drawImage(shadow, 0, 0, cWidth, cHeight);
			shadowData = tempContext.getImageData(0, 0, cWidth, cHeight);
			smoothShadowImg(shadowData);
		}
		searchedImgList = data.img;
		
		if(isSearch == 1){
			showSearchImg(data.img);
		}
	}
	function showSearchImg(data){

		for(var i=0; i<showSearchImgNum; i++){
			var num = i+1;
			document.getElementById('imgsBox'+num).innerHTML = '';

			//img
			tempImg = document.createElement('img');
			tempImg.className = 'img';
			tempImg.src = data[i];
			document.getElementById('imgsBox'+num).appendChild(tempImg);
			$(tempImg).fadeIn(150);
			//p
			tempP = document.createElement('p');
			tempP.innerHTML = num;
			document.getElementById('imgsBox'+num).appendChild(tempP);
			
		}
	}
	function smoothShadowImg(dataCopy){
		var data = dataCopy.data;
		
		/*The Gaussian Matrix 16 is:
			0.0200    0.0202    0.0203    0.0204    0.0203    0.0202    0.0200
			0.0202    0.0204    0.0205    0.0206    0.0205    0.0204    0.0202
			0.0203    0.0205    0.0206    0.0207    0.0206    0.0205    0.0203
			0.0204    0.0206    0.0207    0.0207    0.0207    0.0206    0.0204
			0.0203    0.0205    0.0206    0.0207    0.0206    0.0205    0.0203
			0.0202    0.0204    0.0205    0.0206    0.0205    0.0204    0.0202
			0.0200    0.0202    0.0203    0.0204    0.0203    0.0202    0.0200
		*/
		
		for(var i=3; i<cWidth-3;i++)
			for(var j=3; j<cHeight-3;j++){
				var tempData = 0;
				tempData += ( data[j*cWidth*4 + i*4] + 
							data[(j+1)*cWidth*4 + i*4] + 
							data[(j-1)*cWidth*4 + i*4] + 
							data[j*cWidth*4 + (i+1)*4] + 
							data[j*cWidth*4 + (i-1)*4] )*0.0207;
				
				tempData += ( data[(j+2)*cWidth*4 + i*4] + 
							data[(j-2)*cWidth*4 + i*4] + 
							data[j*cWidth*4 + (i+2)*4] + 
							data[j*cWidth*4 + (i-2)*4] + 
							data[(j-1)*cWidth*4 + (i-1)*4] + 
							data[(j-1)*cWidth*4 + (i+1)*4] + 
							data[(j+1)*cWidth*4 + (i-1)*4] + 
							data[(j+1)*cWidth*4 + (i+1)*4] )*0.0206;
				
				tempData += ( data[(j-2)*cWidth*4 + (i-1)*4] + 
							data[(j-2)*cWidth*4 + (i+1)*4] + 
							data[(j+2)*cWidth*4 + (i-1)*4] + 
							data[(j+2)*cWidth*4 + (i+1)*4] + 
							data[(j-1)*cWidth*4 + (i-2)*4] + 
							data[(j-1)*cWidth*4 + (i+2)*4] + 
							data[(j+1)*cWidth*4 + (i-2)*4] + 
							data[(j+1)*cWidth*4 + (i+2)*4] )*0.0205;
							
				tempData += ( data[(j+3)*cWidth*4 + i*4] + 
							data[(j-3)*cWidth*4 + i*4] + 
							data[j*cWidth*4 + (i+3)*4] + 
							data[j*cWidth*4 + (i-3)*4] + 
							data[(j-2)*cWidth*4 + (i-2)*4] + 
							data[(j-2)*cWidth*4 + (i+2)*4] + 
							data[(j+2)*cWidth*4 + (i-2)*4] + 
							data[(j+2)*cWidth*4 + (i+2)*4] )*0.0204;
				
				tempData += ( data[(j-3)*cWidth*4 + (i-1)*4] + 
							data[(j-3)*cWidth*4 + (i+1)*4] + 
							data[(j+3)*cWidth*4 + (i-1)*4] + 
							data[(j+3)*cWidth*4 + (i+1)*4] + 
							data[(j-1)*cWidth*4 + (i-3)*4] + 
							data[(j-1)*cWidth*4 + (i+3)*4] + 
							data[(j+1)*cWidth*4 + (i-3)*4] + 
							data[(j+1)*cWidth*4 + (i+3)*4] )*0.0203;
							
				tempData += ( data[(j-3)*cWidth*4 + (i-2)*4] + 
							data[(j-3)*cWidth*4 + (i+2)*4] + 
							data[(j+3)*cWidth*4 + (i-2)*4] + 
							data[(j+3)*cWidth*4 + (i+2)*4] + 
							data[(j-2)*cWidth*4 + (i-3)*4] + 
							data[(j-2)*cWidth*4 + (i+3)*4] + 
							data[(j+2)*cWidth*4 + (i-3)*4] + 
							data[(j+2)*cWidth*4 + (i+3)*4] )*0.0202;
							
				tempData += ( data[(j-3)*cWidth*4 + (i-3)*4] + 
							data[(j-3)*cWidth*4 + (i+3)*4] + 
							data[(j+3)*cWidth*4 + (i-3)*4] + 
							data[(j+3)*cWidth*4 + (i+3)*4] )*0.0200;
				
				dataCopy.data[j*cWidth*4 + i*4] = tempData;
				dataCopy.data[j*cWidth*4 + i*4 + 1] = tempData;
				dataCopy.data[j*cWidth*4 + i*4 + 2] = tempData;
				dataCopy.data[j*cWidth*4 + i*4 + 3] = 255;
			}
			
		shadowData = dataCopy;
		var tempCanvas = document.getElementById("shadowImg");
		var tempContext = tempCanvas.getContext("2d");
		tempContext.putImageData(dataCopy, 0, 0);
		
	}

	
	$(".slides").mousemove(function(e){
		if(isShadow == 1){
			var x = e.pageX-cPaddingX;
			var y = e.pageY-cPaddingY;
			
			if(x<cWidth && x>=0 && y<cHeight && y>=0){
				cursorEffect(shadowData,cursorRate,x,y);
			}
		}
	});
	$(".slides").mouseout(function(e){
		if(isShadow == 1){
			cursorOut(shadowData);
		}
	});
	function cursorEffect(dataCopy,r,x,y){
		
		var tempCanvas = document.getElementById("shadowImg");
		var tempContext = tempCanvas.getContext("2d");
		var newData = tempContext.createImageData(cWidth, cHeight);
		
		for(var i=0; i<cWidth;i++)
			for(var j=0; j<cHeight;j++){
				
				var dist = pointDist(x, y, i, j);
				var w = -1.0/400*dist+1;
				if(w<0)
					w = 0;
				
				var tempData = 0;
				var greyData = dataCopy.data[j*cWidth*4 + i*4];
				tempData = greyData*r + (1-r)*(255-(255-greyData)*w);
				newData.data[j*cWidth*4 + i*4] = tempData;
				newData.data[j*cWidth*4 + i*4 + 1] = tempData;
				newData.data[j*cWidth*4 + i*4 + 2] = tempData;
				newData.data[j*cWidth*4 + i*4 + 3] = 255;
			}
		
		tempContext.putImageData(newData, 0, 0);
	}
	function cursorOut(dataCopy){
		
		var tempCanvas = document.getElementById("shadowImg");
		var tempContext = tempCanvas.getContext("2d");
		var newData = tempContext.createImageData(cWidth, cHeight);
		
		for(var i=0; i<cWidth;i++)
			for(var j=0; j<cHeight;j++){
				var greyData = dataCopy.data[j*cWidth*4 + i*4];
				newData.data[j*cWidth*4 + i*4] = greyData;
				newData.data[j*cWidth*4 + i*4 + 1] = greyData;
				newData.data[j*cWidth*4 + i*4 + 2] = greyData;
				newData.data[j*cWidth*4 + i*4 + 3] = 255;
			}
		
		tempContext.putImageData(newData, 0, 0);
	}
	function pointDist(x1, y1, x2, y2){
		return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));
	}
	
	
	
	
	
});


